//鼠标在白色区域内移动能控制彩色容器的高度
//在白色容器内监听鼠标移动事件
//1.获取元素
var speed = document.querySelector('.speed');
//2.获取白色容器
var bar = document.querySelector('.speed-bar');
//3.获取彩色容器
var video = document.querySelector('.flex');
//4.获取视频
// mousemove表示监听的事件名为鼠标移动事件
speed.addEventListener('mousemove', function (e) {
    //控制bar的高度
    //获取鼠标在白色容器内的位置
    var y=e.pageY -speed.offsetTop//表示鼠标在白色容器内的位置-白色容器的顶部位置=鼠标在白色容器内的高度
    var percent = y/ speed.offsetHeight//speed.offsetHeight表示白色容器的高度
    var height = Math.round(percent*100)+'%';//计算彩色容器高度占白色容器的百分比,math.round表示取整
    bar.style.height=height;//将高度赋值给彩色容器
    //控制数值
    var min=0.5;
    var max=3;
    var playbackRate=percent*(max-min)+min;//计算出倍速值
    bar.textContent=playbackRate.toFixed(2)+'x';//toFixed(2)表示保留2位小数,给文本
    //控制视频的播放速度
    video.playbackRate=playbackRate;
})
